<!--
 * @FileDescription: 客户分布地图
 * @Author: luyaj
 * @Date: 2021-12-29 16:42:00
 * @LastEditors: luyaj
 * @LastEditTime: 2022-11-30 14:09:23
-->
<template>
  <a-card :bordered="false">

    <!-- 地图 -->
    <div id="container"></div>

    <div ref="infoWindow" v-if="showPop">
      <p>第{{info.index}}个点</p>
      <p>站点名称：{{info.siteName}}</p>
      <p>安装工程师：{{info.fitterName}}</p>
      <p>业务负责人：{{info.userName}}</p>
      <p>安装日期：{{info.siteCreateTime}}</p>
      <a-button @click="handleDetail">查看详情</a-button>
    </div>

    <!-- 详情 -->
    <site-detail-modal ref="detailModal" />
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { getAction } from '@/api/manage'
  import province from '@/utils/province.json'
  import SiteDetailModal from './modules/SiteDetailModal.vue'

  export default {
    name: 'customerMap',
    mixins:[mixinDevice],
    components: { SiteDetailModal },
    data () {
      return {
        description: '客户分布地图管理页面',
        dispatchList: [],
        queryParam: { city: undefined },
        province: province,
        city: [],
        cityDisabled: true,
        result: [],
        url: {
          queryLocation: "/web/bizOrderSite/queryCustLocation",
          dispatchUrl: "/sys/user/queryDispatch"
        },
        showPop: false,
        info: {}
      }
    },
    methods: {
      loadMap() {
        var map = new AMap.Map('container', {
          zoom: 14,
          resizeEnable: true,
        });
        // 添加点和窗体

        this.result.forEach((item, i) => {
          if (item.locationMsgVO) {
            let marker = new AMap.Marker({
              map: map,
              position: item.location.split(','),
            });
            marker.on('click', (e) => {
              this.info = item
              this.$set(this.info, 'index', i)
              this.showPop = true
              let infoWindow = new AMap.InfoWindow({
                offset: new AMap.Pixel(0, -30),
                content: this.$refs.infoWindow
              });
              infoWindow.open(map, e.target.getPosition());
            });
            marker.emit('click', {target: marker});
          }
        })
        map.setFitView();

        // 加载BasicControl，loadUI的路径参数为模块名中 'ui/' 之后的部分
        AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
          // 图层切换控件
          map.addControl(new BasicControl.LayerSwitcher({
            position: 'rt' //right top，右上角
          }));
        });
      },
      handleDetail() {
        this.$refs.detailModal.open(this.info)
      },
      searchQuery() {


            this.result =  [
              {
                "id": "1525003076406652929",
                "siteName": "空港包场厂",
                "location": "106.63886319953995,29.75185306322082",
                "fitterId": "1479337283375595521",
                "fitterName": "郑伟峰",
                "companyName": "重庆正德孙总",
                "userName": "秦正华",
                "siteCreateTime": "2022-05-13",
                "locationMsgVO": {
                  "lat": "106.63886319953995",
                  "lng": "29.75185306322082"
                }
              },
              {
                "id": "1526746939655761922",
                "siteName": "仙桃塞义再生资源中心",
                "location": "113.41969534438478,30.32986726554412",
                "fitterId": "1522404235341791234",
                "fitterName": "顾秉秉",
                "companyName": "湖北鑫隆冶金科技发展有限公司",
                "userName": "刘海华",
                "siteCreateTime": "2022-05-18",
                "locationMsgVO": {
                  "lat": "113.41969534438478",
                  "lng": "30.32986726554412"
                }
              },
              {
                "id": "1527267426781708290",
                "siteName": "长沙环丰再生资源利用有限公司",
                "location": "113.04402247397668,28.109513357600772",
                "fitterId": "1522404235341791234",
                "fitterName": "顾秉秉",
                "companyName": "湖南长沙郑总",
                "userName": "秦正华",
                "siteCreateTime": "2022-05-19",
                "locationMsgVO": {
                  "lat": "113.04402247397668",
                  "lng": "28.109513357600772"
                }
              },
              {
                "id": "1529052863066095618",
                "siteName": "贵州创塑园再生资源有限公司",
                "location": "106.68037038333534,26.262922583751354",
                "fitterId": "1522404235341791234",
                "fitterName": "顾秉秉",
                "companyName": "贵州创塑园再生资源有限公司",
                "userName": "刘海华",
                "siteCreateTime": "2022-05-24",
                "locationMsgVO": {
                  "lat": "106.68037038333534",
                  "lng": "26.262922583751354"
                }
              }]
            this.loadMap()

      },
      searchReset() {
        this.queryParam = {}
        this.searchQuery()
      },
      /** 安装工程师 */
      queryDispatch() {
        getAction(this.url.dispatchUrl).then(res => {
          if (res.success) {
            this.dispatchList = res.result.map(v => {
              return {
                text: v.realname,
                value: v.id
              }
            })
          }
        })
      },
    },
    mounted() {
      this.searchQuery()
     // this.queryDispatch()
    }
  }
</script>

<style lang="less" scoped>
  @import '~@assets/less/common.less';
  #container {
    height: calc(100vh - 59px - 52px - 185px);
    .amap-icon img{
      width: 25px;
      height: 34px;
    }
  }
</style>